<script setup lang="ts" name="CarouselProperty">
import { CarouselProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'

// 轮播图属性面板

const props = defineProps<{ modelValue: CarouselProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<template>
  <MallProperty v-model="formData.style">
    <ElForm label-width="80px" :model="formData">
      <ElCard header="样式设置" class="property-group" shadow="never">
        <ElFormItem label="样式" prop="type">
          <ElRadioGroup v-model="formData.type">
            <ElTooltip class="item" content="默认" placement="bottom">
              <ElRadioButton label="default">
                <SvgIcon icon="system-uicons:carousel" />
              </ElRadioButton>
            </ElTooltip>
            <ElTooltip class="item" content="卡片" placement="bottom">
              <ElRadioButton label="card">
                <SvgIcon icon="ic:round-view-carousel" />
              </ElRadioButton>
            </ElTooltip>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="指示器" prop="indicator">
          <ElRadioGroup v-model="formData.indicator">
            <ElRadio label="dot">小圆点</ElRadio>
            <ElRadio label="number">数字</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="是否轮播" prop="autoplay">
          <ElSwitch v-model="formData.autoplay" />
        </ElFormItem>
        <ElFormItem v-if="formData.autoplay" label="播放间隔" prop="interval">
          <ElSlider v-model="formData.interval" :max="10" :min="0.5" :step="0.5" show-input input-size="small" :show-input-controls="false" />
          <ElText type="info">单位：秒</ElText>
        </ElFormItem>
      </ElCard>
      <ElCard header="内容设置" class="property-group" shadow="never">
        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
          <template #default="{ element }">
            <ElFormItem label="类型" prop="type" class="m-b-8px!" label-width="40px">
              <ElRadioGroup v-model="element.type">
                <ElRadio label="img">图片</ElRadio>
                <ElRadio label="video">视频</ElRadio>
              </ElRadioGroup>
            </ElFormItem>
            <ElFormItem v-if="element.type === 'img'" label="图片" class="m-b-8px!" label-width="40px">
              <UploadImage v-model="element.imgUrl" draggable="false" height="80px" width="100%" class="min-w-80px" />
            </ElFormItem>
            <template v-else>
              <ElFormItem label="封面" class="m-b-8px!" label-width="40px">
                <UploadImage v-model="element.imgUrl" draggable="false" height="80px" width="100%" class="min-w-80px" />
              </ElFormItem>
              <ElFormItem label="视频" class="m-b-8px!" label-width="40px">
                <UploadFile v-model="element.videoUrl" :file-type="['mp4']" :limit="1" :file-size="100" class="min-w-80px" />
              </ElFormItem>
            </template>
            <ElFormItem label="链接" class="m-b-8px!" label-width="40px">
              <MallAppLinkInput v-model="element.url" />
            </ElFormItem>
          </template>
        </Draggable>
      </ElCard>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
